{% extends 'layout/base.html' %}

{% block css %}
    <style>
        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .card > .card-header a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .card > .card-heading .function .upload {
            overflow: hidden;
        }

        .card > .card-header .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

        .upload-progress {
            position: fixed;
            right: 2px;
            bottom: 2px;
            width: 400px;
        }

        .upload-progress .progress-error {
            color: red;
        }

        .error-msg {
            color: red;
        }
    </style>
{% endblock %}


{% block content %}
    <!--上传文件失败时，错误提示-->
    <div class="row">
        <div class="alert alert-danger alert-dismissible" id="alert" hidden>
            <button type="button" class="btn-close" data-bs-dismiss="alert" id="off_alert"></button>
            <strong>上传文件错误!</strong><span id="span_text"></span>
        </div>

        <div class="container-fluid">
            <div class="card">
                <div class="card-header" style="display: flex; justify-content: space-between;">
                    <div>
                        <a href="{% url 'file' %}?pid={{ pid }}">
                            {% if file_obj %}
                                <i class="fa fa-home" aria-hidden="true"></i>
                                <span>{{ file_obj }}</span>
                            {% endif %}
                        </a>
                        {% for record in breadcrumb_list %}
                            <a href="{% url 'file' %}?pid={{ pid }}&folder={{ record.id }}">
                                <i class="fa fa-caret-right" aria-hidden="true"></i>
                                <span>{{ record.name }}</span>
                            </a>
                        {% endfor %}
                    </div>
                    <div class="function">
                        <div class="btn btn-primary btn-sm upload" style="position: relative">
                            <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>
                            <input type="file" multiple name="uploadFile" id="uploadFile">
                            <input type="hidden" value={{ pid }} id="pid_id">
                        </div>
                        <a class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addModal"
                           data-whatever="新建文件夹">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>文件大小</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="rowList">
                        {% for item in file_object_list %}
                            <tr>
                                <td>
                                    {% if item.file_type == 1 %}
                                        <i class="fa fa-file" aria-hidden="true"></i>
                                        {{ item.name }}
                                    {% else %}
                                        <a href="{% url 'file' %}?pid={{ item.project_id }}&folder={{ item.id }}">
                                            <i class="fa fa-folder" aria-hidden="true"></i>
                                            {{ item.name }}
                                        </a>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if item.file_type == 1 %}
                                        {{ item.file_size }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>{{ item.update_datetime }}</td>
                                <td>
                                    {% if item.file_type == 2 %}
                                        <a class="btn btn-default btn-sm"
                                           data-bs-toggle="modal"
                                           data-bs-target="#addModal"
                                           data-name="{{ item.name }}"
                                           data-p_name="{{ item.project.id }}"
                                           data-fid="{{ item.id }}"
                                           data-whatever="修改文件夹">
                                            <i class="fa fa-pencil-square-o" aria-hidden="true" title="编辑"></i>
                                        </a>
                                    {% else %}
                                        <a class="btn btn-default btn-sm"
                                           href="{% url 'file_download' item.id %}?pid={{ item.id }}">
                                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                        </a>
                                    {% endif %}
                                    <a class="btn btn-danger btn-sm"
                                       data-bs-toggle="modal"
                                       data-fid="{{ item.id }}"
                                       data-bs-target="#myModal">
                                        <i class="fa fa-trash" aria-hidden="true" title="删除"></i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <!--modal对话框-->
            <div class="modal fade" id="addModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                 aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel"></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="addForm">
                                {% csrf_token %}
                                <input type="hidden" name="fid" id="fid">
                                {% for field in form %}
                                    <div class="form-group">
                                        <span style="color: red">*</span>
                                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        {{ field }}
                                        <span class="error-msg"></span>
                                    </div>
                                {% endfor %}
                                <br/>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="bindSubmit">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--modal删除对话框-->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h5 class="modal-title">提示</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <!-- 模态框内容 -->
                        <div class="modal-body">
                            <h6>确定删除?</h6>
                        </div>
                        <!-- 模态框底部 -->
                        <div class="modal-footer">
                            <button type="button" id="btnDelete" class="btn btn-danger" data-bs-dismiss="modal">确定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div hidden>
            <table id="rowTpl">
                <tr>
                    <td>
                        <i class="fa fa-file" aria-hidden="true"></i>
                        <span class="name"></span>
                    </td>
                    <td class="file_size"></td>
                    <td class="datetime"></td>
                    <td>
                        <a class="btn btn-default btn-sm download">
                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                        </a>
                        <a class="btn btn-danger btn-sm delete" data-bs-toggle="modal" data-bs-target="#myModal">
                            <i class="fa fa-trash" aria-hidden="true" title="删除"></i>
                        </a>
                    </td>
                </tr>
            </table>
        </div>

    </div>
{% endblock %}

{% block js %}
    <script>
        var FOLDER_URL = "{% url 'file' %}";
        var FILE_DELETE_URL = "{% url 'file_delete' %}";
        var FILE_SIZE = "{% url 'file_size' %}";
        var CURRENT_FOLDER_ID = "{{ folder_object.id }}";
        $(function () {
            initAddModal();
            bindModelSubmit();
            bindDeleteSubmit();
            bindUploadFile();
            bindOff();
        });

        function initAddModal() {
            $("#addModal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var recipient = button.data('whatever');
                var name = button.data('name');
                var fid = button.data('fid');
                console.log("fid",fid);
                var p_name = button.data("p_name");
                var modal = $(this);
                modal.find('.modal-title').text(recipient);
                if (fid) {
                    // 编辑
                    modal.find('.error-msg').empty();
                    modal.find('#id_name').val(name);
                    modal.find('#id_project').val(p_name);
                    modal.find('#fid').val(fid);
                } else {
                    // 新建
                    modal.find('.error-msg').empty();
                    $('#addForm')[0].reset();
                }
            });
            /*删除modal对话框*/
            $("#myModal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var fid = button.data('fid');
                $('#btnDelete').attr('fid', fid);
            })
        }

        /*新建文件夹*/
        function bindModelSubmit() {
            $('#bindSubmit').click(function () {
                $.ajax({
                    url: location.href,
                    type: "POST",
                    data: $("#addForm").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.href = location.href;
                        } else {
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }

        /*删除文件夹*/
        function bindDeleteSubmit() {
            $("#btnDelete").click(function () {
                $.ajax({
                    url: FILE_DELETE_URL,
                    type: "GET",
                    data: {fid: $(this).attr('fid')},
                    success: function (res) {
                        if (res.status) {
                            window.location.href = location.href;
                        }
                    }
                })
            })
        }

        /*文件上传*/
        function bindUploadFile() {
            $("#uploadFile").change(function () {
                var pid = $("#pid_id").val();
                var fileList = $(this)[0].files;
                var checkFileList = new FormData();
                $.each(fileList, function (index, fileObject) {
                    checkFileList.append("f1", fileObject)
                });
                checkFileList.append("pid", pid); //项目id
                checkFileList.append("fid", CURRENT_FOLDER_ID); //进入目录id
                $.ajax({
                    url: FILE_SIZE,
                    type: "POST",
                    data: checkFileList,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.status) {
                            $.each(res.data, function (index, item) {
                                var newTr = $("#rowTpl").find('tr').clone();
                                newTr.find(".name").text(item.name);
                                newTr.find('.file_size').text(item.file_size);
                                newTr.find('.datetime').text(item.datetime);
                                newTr.find('.delete').attr('data-fid', item.id);
                                newTr.find('.download').attr('href', item.download_url);
                                $('#rowList').append(newTr);
                            });
                        } else {
                            $("#alert").removeAttr("hidden");
                            $("#span_text").text(res.error)
                        }

                    }

                })

            });
        }

        function bindOff() {
            $("#off_alert").click(function () {
                window.location.href = location.href;
            })
        }

    </script>

{% endblock %}